<style>
       
        #mapa-test-page {line-height: 0 !important;}
        #footer {margin-top: 0px;}
        #footer .a-pulmon {display: none !important;}

        @media (max-width: 767px) {
        #footer {display: none;}
       }   
</style>

<div id="mapa-page">
    <?php if (base_url() == 'http://dev.dondereciclo.org/greentomato/dr-arg/') { ?>
        <iframe src="http://dev.dondereciclo.org/greentomato/dr-app/donde-reciclo/" style="border: none; width: 100%"></iframe>
    <?php } else if (base_url() == 'http://www.dondereciclo.org.ar/') { ?>
        <iframe src="http://www.dondereciclo.org.ar/apps/donde-reciclo/" style="border: none; width: 100%"></iframe>
    <?php } else { ?>
        <iframe src="http://localhost:8888/svn/drapp/donde-reciclo/" style="border: none; width: 100%"></iframe>
    <?php } ?>
</div>

<!-- detalles del punto de reciclado -->
<div id="detallesMarkerTpl" style="display: none">
    <div class="span12 box-container">
        <!--<div id="marker-menu-container" class="span2 hidden-phone">
            <nav id="marker-menu" class="border-left">
                <span class="border-width bg-color-07"></span>
                <ul id="actions-items" class="span box-list">
                    <li class="span box-item box-padding social-item">
                        <div class="fb-like" data-href="<?php echo(base_url()); ?>mapa/recicladora/${markerNombreUrl}/${markerCategoriaUrl}/${markerId}" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
                    </li>
                    <li class="span box-item box-padding social-item" id="twbtn">
                        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                    </li>
                </ul>

                <ul id="info-items" class="span box-list">
                    <li id="visitas-item" class="span box-item box-padding">
                        <span class="icons icons-panel icon-visits"></span>
                        <b class="text">visitas:</b>
                        <span class="val">${markerVisitas}</span>
                    </li>
                    <!--<li id="favoritos-item" class="span box-item box-padding">
                        <span class="icons icons-panel icon-favorite-16x"></span>
                        <b class="text">favoritos:</b>
                        <span class="val">${markerFavoritos}</span>
                    </li>
                    <li id="tips-item" class="span box-item box-padding">
                        <span class="icons icons-panel icon-comments"></span>
                        <b class="text">tips:</b>
                        <span class="val">${markerTips}</span>
                    </li>->
                </ul>
            </nav>
        </div>-->
        <div id="marker-details-content" class="span12">
            <div id="logos-row" class="span">
                ${logos}
            </div>
            <div id="datos-row" class="span">
                <a href="#" class="back-to-map icons-collapse icon-collapse-up"></a>
                
                <h3 class="title">${markerNombre} <i class="label">${markerTipo}</i></h3>
                <ul class="span12 info-list box-list">
                    <li id="address-item" class="box-item span6">
                        <b class="title-item">Direcci&oacute;n:&nbsp;</b><span class="val">${markerDireccion}</span>
                    </li>
                    <li id="hour-item" class="box-item span6">
                        <b class="title-item">Horario:&nbsp;</b><span class="val">${markerHorario}</span>
                    </li>
                    <li id="phone-item" class="box-item span6">
                        <b class="title-item">Telefono:&nbsp;</b><span class="val">${markerTelefono}</span>
                    </li>
                    <li id="web-item" class="box-item span6">
                        <b class="title-item">Web:&nbsp;</b><span class="val">${markerWeb}</span>
                    </li>
                    <li id="email-item" class="box-item span6">
                        <b class="title-item">Email:&nbsp;</b><span class="val">${markerEmail}</span>
                    </li>
                    <li id="fb-item" class="box-item span6">
                        <b class="title-item">Facebook:&nbsp;</b><span class="val">${markerFacebook}</span>
                    </li>
                    <li id="tw-item" class="box-item span6">
                        <b class="title-item">Twitter:&nbsp;</b><span class="val">${markerTwitter}</span>
                    </li>
                    <li id="recive-item" class="box-item span12" style="margin-left: 0">
                        <b class="title-item">Reciben:&nbsp;</b>
                        <span class="val">
                            ${reciben}
                        </span>
                    </li>
                    <li id="phone-item" class="box-item span12">
                        <b class="title-item">Descripcion:</b>
                        <p id="descripcion-item" class="description">
                            ${markerDescripcion} 
                        </p>
                    </li>
                </ul>
            </div>
            <div id="fotos-row" class="span">
                <a href="#" class="back-to-map icons-collapse icon-collapse-up"></a>
                <h3 class="title">Fotos</h3>
                <ul id="fotos-list" class="box-list span">
                    ${images}
                </ul>
            </div>
            <!--<div id="tips-row" class="span">
                <a href="#" class="back-to-map icons-collapse icon-collapse-up"></a>
                <h3 class="title">Tips</h3>
                <ul id="tips-list" class="box-list span">
                    ${tips}
                </ul>
            </div>-->
        </div>
        <div id="marker-bottom-menu-container" class="span2 visible-phone">
            <nav id="marker-bottom-menu" class="border-left">
                <ul id="actions-items" class="span box-list">
                    <li class="span box-item box-padding social-item">
                        <div class="fb-like" data-href="<?php echo(base_url()); ?>mapa/recicladora/${markerNombreUrl}/${markerCategoriaUrl}/${markerId}" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
                    </li>
                    <li class="span box-item box-padding social-item" id="twbtn">
                        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<div id="tipTpl" style="display: none">
    <li class="box-item span">
        <div class="left">
            <span class="avatar"><img src="" alt="" title=""/></span>
        </div>
        <div class="right">
            <div class="user-name"><b class="name">${owner}</b> dice,</div>
            <p class="comment">${comentario}</p>
        </div>
    </li>
</div>
<div id="noTipsTpl" style="display: none">
    <p>En este punto todav&iacute;a nadie carg&oacute; ning&uacute;n tip.</p>
</div>
<div id="noImagesTpl" style="display: none">
    <li id="noImages">En este punto todav&iacute;a nadie carg&oacute; ninguna imagen.</li>
</div>
<textarea id="categoryListTpl" style="display: none">
    <li class="list-item ${categoriaIdentificador}-item">
    <span class="border-width bg-color-${categoriaIdentificador}"></span>
        <a class="link" href="${baseUrl}${categoriaIdentificador}"
            onclick="${jsOnclick}"
            title="Puntos de reciclado de ${categoriaNombre}"
            id="categoria${categoriaId}"><span class="text">${categoriaNombre}</span></a>
    </li>
</textarea>
<textarea id="infoboxContent" style="display: none">
    <img src="<?php echo base_url(); ?>resources/img/arrows/generic.png" />
    <div class="content">
        <p><strong>${markerNombre}</strong><br />
        ${markerDireccion}<br />
        ${categoriasToString}</p>
    </div>
</textarea>

<textarea id="infoCategoryListTpl" style="display: none">
    <li data-category-id="${categoriaId}" class="list-item ${categoriaIdentificador}-item">
    <span class="border-width bg-color"></span>
    <a class="link" href="#${categoriaIdentificador}"><span class="text">${categoriaNombre}</span><span class="arrow"></span></a>
    </li>
</textarea>


<div id="sliderBox" style="display: none"><!-- sliderbox -->
    <div id="category-list-container" class="category-list-container border-left overflow">
	<span class="border-width bg-color-07"></span>
	<div class="content">
	    <ul id="category-list" class="category-list box-list first-level">
	    </ul>
	</div>
	<input id="btn-expand-markers-list" type="button"></div>
</div>

<div class="modal hide" id="decunciar-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
	<h5 id="myModalLabel"><span class="icon icon-denuncia-active"></span>&nbsp;&nbsp;Denunci&aacute; este punto</h5>
    </div>
    <div class="modal-body">
	<p>Si detectas actividades irregulares en este punto de reciclaje, lo encontras fuera de funcionamiento, o tuviste una mala experiencia, envianos tu denuncia.</p>
	<p>
	    <b id="denunciar-nombre">Supermercado Coto</b><br/>
	    <span id="denunciar-ubicacion">Av. Carrasco 2471, CapFed.</span><br/><br/>
	    <b>Motivo de la denuncia</b><br/>
	    <select id="denunciar-motivo">
		<option>1</option>
	    </select><br/><br/>
	    <b>Comentarios <span>(Contanos brevemente que inconveniente tuviste.)</span></b><br/>
	    <textarea id="denunciar-textarea"></textarea>
	</p>
	<button class="btn btn-danger btn-denunciar">Denunciar</button>
    </div>
</div>
<input type="hidden" name="markerId" id="markerId" value="" />
<script type="text/javascript" src="<?php echo base_url(); ?>resources/jquery/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>resources/js/fileuploader.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>resources/js/chico-min-0.11.1.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>resources/jquery/components/fancybox/jquery.fancybox.pack.js"></script>